<!-- 静态注册api授权弹窗 -->
<template>
  <div class="dash-container">
    <div v-if="actStep===1" class="dc-header">
      <div class="dch-title">接口接入注册</div>
      <div class="dch-desc">完成以下步骤，获取API访问凭证并配置算力资源</div>
    </div>
    <div v-if="actStep===2" class="dc-header">
      <div class="dch-title">算力与资源配置</div>
      <div class="dch-desc">配置接入系统的算力参数和资源访问地址</div>
    </div>
    <el-steps :active="actStep">
      <el-step title="系统注册" description=""></el-step>
      <el-step title="调取凭证" description=""></el-step>
      <el-step title="完成(配置算力)" description=""></el-step>
    </el-steps>
    <div v-if="actStep===1" class="box-card">
      <div class="bc-title">系统接入配置 </div>
      <div class="bc-desc">填写接入系统信息，完成注册</div>
      <el-form ref="form" :rules="rules" :model="form" @submit.native.prevent>
        <el-form-item label="系统名称" prop="name">
          <el-input v-model="form.name" placeholder="填写系统名称" />
        </el-form-item>
        <el-form-item label="系统编码" prop="code">
          <el-input v-model="form.code" placeholder="填写该系统位编码(也可以提供随机生成系统编码），如果是自动生成提供复制功能，系统需要提供复制功能 " />
        </el-form-item>
        <el-form-item label="系统描述" prop="description">
          <el-input v-model="form.description" type="textarea" :autosize="{ minRows:5}" placeholder="选填，描述系统功能和用途"> </el-input>
        </el-form-item>
      </el-form>
      <div class="bc-btn">
        <el-button @click="handleCancel('reset')">重置</el-button>
        <el-button type="primary" @click="handleClientID('form')">生成ClientID</el-button>
      </div>
    </div>
    <!-- 生成ClientID--弹窗 -->
    <el-dialog
      title="生成ClientID"
      :visible.sync="dialogVisible"
      width="30%"
      destroy-on-close
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="">{{ cliID }}</div>
      <el-button type="text" @click="handleCopyID()">复制ID</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="handleNext(2)">下一步</el-button>
      </span>
    </el-dialog>
    <div v-if="actStep===2">
      <div class="box-card">
        <div class="bc-title">系统接入信息</div>
        <div class="bc-row">
          <div class="bcr-column">
            <div class="bcrc-icon">
              <i class="el-icon-film"></i>
            </div>
            <div>
              <div class="bcrc-title">系统名称</div>
              <div>{{ form.name }}科技报告</div>
            </div>
          </div>
          <div class="bcr-column">
            <div class="bcrc-icon">
              <i class="el-icon-key"></i>
            </div>
            <div>
              <div class="bcrc-title">Client ID</div>
              <div>{{ cliID }}keyw_kes_jkdjfa_kfkjk</div>
            </div>
          </div>
        </div>
      </div>
      <el-form ref="hashForm" :rules="hashRules" :model="hashForm" @submit.native.prevent>
        <div class="box-card">
          <div class="bc-title">算力资源配置</div>
          <div class="bc-desc">设置接入系统的算力使用限制</div>
          <el-form-item label="总算力配额" prop="totalQuota">
            <el-input v-model.number="hashForm.totalQuota" type="number" :min="0" step="1" placeholder="系统可使用的总算力额度">
              <template slot="append">Token</template>
            </el-input>
            <div class="bc-tip">1CU=1核CPU+4GB内存的计算能力，可处理约1000次标准API调用 </div>
          </el-form-item>
          <el-form-item label="单日最大算力" prop="maxPower">
            <el-input v-model.number="hashForm.maxPower" type="number" :min="0" placeholder="系统每日可使用的最大算力">
              <template slot="append">CU/天</template>
            </el-input>
          </el-form-item>
          <el-alert title="单日最大算力不应超过总算力配额的30%，以避免短期内资源耗尽 " :closable="false" type="warning" show-icon />
        </div>
        <div class="box-card">
          <div class="bc-title">资源访问配置</div>
          <div class="bc-desc">设置接入系统的资源访问地址</div>
          <el-form-item label="资源访问基础地址" prop="resAccBaseAds">
            <el-input v-model="hashForm.resAccBaseAds" placeholder="API请求的基础URL" />
          </el-form-item>
          <el-form-item label="回调通知地址" prop="cbkNotfAds">
            <el-input v-model="hashForm.cbkNotfAds" placeholder="异步任务结果回调地址" />
          </el-form-item>
          <div class="bc-jsb">
            <div class="">ip访问白名单</div>
            <el-button type="text" @click="handleAddIp()">添加Ip</el-button>
          </div>
          <div v-for="(item,i) in hashForm.ipList" :key="i" class="bc-item">
            <el-input v-model="item.url" placeholder="请输入ip地址" />
            <i class="el-icon-delete bci-icon" @click="handleDelete(i)"></i>
          </div>
          <div class="bc-btn">
            <el-button @click="handleCancel('lastStep')">上一步</el-button>
            <el-button type="primary" @click="handleSave('hashForm')">保存配置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div v-if="actStep===3" class="box-card">
      <el-result icon="success" title="成功" sub-title="请根据提示进行操作">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="handleCancel('goback')">返回</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actStep: 1,
      form: {
        code: '',
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '请输入清晰可辨识的系统名称', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入清晰可辨识的系统编码', trigger: 'blur' },
          { pattern: /^[^\u4e00-\u9fa5]*$/, message: '系统编码不能有汉字', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 弹窗
      cliID: '',
      hashForm: {
        totalQuota: '',
        maxPower: '',
        resAccBaseAds: '',
        cbkNotfAds: '',
        ipList: []
      },
      hashRules: {
        totalQuota: [
          { required: true, message: '请输入系统可使用的总算力额度', trigger: 'blur' },
          { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        maxPower: [
          { required: true, message: '请输入系统每日可使用的最大算力', trigger: 'blur' },
          { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        resAccBaseAds: [
          { required: true, message: '请输入API请求的基础URL', trigger: 'blur' },
          {
            pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/,
            message: '请输入有效的URL地址格式',
            trigger: 'blur'
          }
        ],
        cbkNotfAds: [
          { required: false, message: '请输入异步任务结果回调地址', trigger: 'blur' },
          {
            pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/,
            message: '请输入有效的URL地址格式',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    // 取消
    handleCancel(type) {
      this.dialogVisible = false
      // 重置
      if (type === 'reset') {
        this.cliID = ''
        this.form = {
          code: '',
          name: '',
          description: ''
        }
      }
      // 上一步
      if (type === 'lastStep') {
        this.actStep = 1
      }
      // 返回
      if (type === 'goback') {
        this.actStep = 1
        this.cliID = ''
        this.form = {
          code: '',
          name: '',
          description: ''
        }
        this.hashForm = {
          totalQuota: '',
          maxPower: '',
          resAccBaseAds: '',
          cbkNotfAds: '',
          ipList: []
        }
      }
    },
    // 生成ClientID
    handleClientID(formRef) {
      this.$refs[formRef].validate(v => {
        if (v) {
          this.cliID = '62e8509a86af4d72962321b5746dbb8axxasdf'
          this.dialogVisible = true
        }
      })
    },
    // 复制内容方法--打包发布后，复制报错修改
    handleCopyID() {
      const textToCopy = this.cliID
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(textToCopy).then(() => {
          this.$message({ message: '复制成功', type: 'success' })
        }).catch(() => {
          this.$message({ message: '复制失败', type: 'error' })
        })
      } else {
        // 创建text area
        const textArea = document.createElement('textarea')
        textArea.value = textToCopy
        // 使text area不在viewport，同时设置不可见
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        return new Promise((resolve, reject) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
          textArea.remove()
        }).then(() => {
          this.$message({ message: '复制成功', type: 'success' })
        }, () => {
          this.$message({ message: '复制失败', type: 'error' })
        })
      }
    },
    // 下一步
    handleNext(num) {
      this.dialogVisible = false
      this.actStep = parseInt(num)
    },
    // 添加IP
    handleAddIp() {
      this.hashForm.ipList.push({ url: '' })
    },
    handleDelete(index) {
      this.hashForm.ipList.splice(index, 1)
    },
    // 保存配置
    handleSave(formRef) {
      this.$refs[formRef].validate(v => {
        if (v) {
          this.actStep = 3
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-step__head.is-process{
    color: #C0C4CC;
    border-color: #C0C4CC;
  }
  .el-step__title.is-process{
    color: #C0C4CC;
  }
}
.dash-container{
  padding: 20px 150px 20px 50px;
  .dc-header{
    margin-bottom: 30px;
    .dch-title{
      font-size: 24px;
      margin-bottom: 10px;
    }
    .dch-desc{
      font-size: 14px;
      color: #7e8b9e;
    }
  }
  .box-card{
    margin-top: 30px;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    border:1px solid #e2e2e2;
    .bc-title{
      font-size: 18px;
      margin-bottom: 10px;
    }
    .bc-desc{
      font-size: 14px;
      color: #7e8b9e;
      margin-bottom: 30px;
    }
    .bc-btn{
      margin: 30px 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .bc-tip{
      font-size: 14px;
      color: #7e8b9e;
    }
    .bc-row{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      margin-top: 20px;
      .bcr-column{
        display: flex;
        align-items: center;
        font-weight: bold;
        .bcrc-icon{
          background: #eff6ff;
          color: #3a72ed;
          border-radius: 100%;
          padding: 10px;
          font-size: 20px;
          margin-right: 15px;
        }
        .bcrc-title{
          font-weight: 400;
          color: #778599;
          margin-bottom: 10px;
        }
      }
    }
    .bc-jsb{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #606266;
      font-weight: 700;

    }
    .bc-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
     .bci-icon{
        font-size: 20px;
        margin-left: 10px;
        color: #f00;
        cursor: pointer;
      }
    }
  }
}

</style>
